<template>
  <n-thing class="leader" content-indented v-if="!follow">
    <template #avatar>
      <n-image
        :preview-disabled="true"
        lazy
        width="45"
        src="/src/assets/icon/moren.png"></n-image>
    </template>
    <template #header>
      <span class="header-title">{{ message.fromUser }}</span>
      <span class="message-time">
        {{ messageTime }}
      </span>
    </template>
    {{ message.content }}
  </n-thing>
  <JoinMessageItems v-if="follow" :message="message" />
</template>

<script setup lang="ts">
import { ChatMessage } from "@/api";
import { computed } from "vue";
import JoinMessageItems from "@/components/message-window/JoinMessageItems.vue";
import { formatTime2 } from "@/utils";

const props = defineProps<{
  message: ChatMessage;
  previousMessage?: ChatMessage;
}>();

const follow = computed(() => {
  return (
    props.previousMessage &&
    props.previousMessage?.fromUser === props.message.fromUser &&
    props.message.createTime - props.previousMessage?.createTime < 60 * 1000
  );
});

const messageTime = computed(() => formatTime2(props.message.createTime));
</script>

<style scoped>
.n-image {
  border-radius: 50px;
  border: #999999 1px solid;
}

.n-thing:hover {
  background-color: #eaffe3;
}

.n-thing {
  /*圆边*/
  border-radius: 30px;
  /*定位*/
  position: relative;
}

.leader {
  padding: 5px 20px;
}

.n-image {
  margin-right: 10px;
  margin-left: 5px;
}

.header-title {
  /*加粗*/
  font-weight: bold;
  font-size: 18px;
}

.message-time {
  margin: 0 0 0 5px;
  font-size: 13px;
  color: #c0c0c0;
  font-weight: normal;
}
</style>
